<template>
  <div id="app">
    <div class="container">
      <div class="left">
        <h2>认识溶氧</h2>
        <p>
          溶氧是水产养殖中最重要且最容易发生问题的水质因子之一，水体的实际溶氧量受到其中生物、物理和化学等因素的共同影响而时刻变化。当水中溶氧不足时，首先直接对养殖动物产生不利影响；其次是通过影响水体环境中其它生物和理化指标而间接影响养殖动物，致使其生长、繁殖甚至生存造成不同程度的危害，轻则体质下降、生长减缓，重则浮头、泛塘，导致大量死亡。
        </p>
      </div>
      <div class="middle">
        <h2>典型案例</h2>
        <div class="carousel">
          <el-carousel indicator-position="outside" height="800px">
            <el-carousel-item v-for="item in list" :key="item.id">
              <div class="imgBox">
                <img :src="item.img" alt="">
              </div>
            </el-carousel-item>
          </el-carousel>
        </div>
      </div>
      <div class="right">
        <h2>提升溶氧小妙招</h2>
        <h3>生物增氧</h3>
        <p>通过藻类的光合作用、藻类通过自身的叶绿体、利用光能、把二氧化碳和水转化成葡萄糖和氧气。既然藻类可以产生氧气、那么我们就要增加水体当中藻类的数量。</p>
        <h3>物理增氧</h3>
        <p>通过开启增氧机、把水打成小水花、增加水与空气的接触面积、让空气更好的与水结合、增加水体的载氧量。或是直接将空气输送到池底、增加空气与水体的接触面积和接触时间、让其溶解的更多。通过增加新鲜水源、增加水体的溶氧。</p>
        <h3>化学增氧</h3>
        <p>通过向池塘抛洒增氧粉（过碳酸钠等）、双氧水、以及一些表面活性剂等、短时间内提高水体的溶氧。</p>
        <h3>其他</h3>
        <p>减少养殖水体周围遮阴的物质</p>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'O2',
  data() {
    return {
      list: [
        {
          id: 1,
          img: require('@/assets/wq/o21.jpg'),
        },
        {
          id: 2,
          img: require('@/assets/wq/o22.jpg'),
          // img: require('')
        },
        {
          id: 3,
          img: require('@/assets/wq/o23.jpg'),
        }
      ]
    }
  }
}
</script>

<style scoped>
p{
  letter-spacing: 5px;
  line-height: 2;
}
/* 布局样式 */
.container {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 20px;
}
.left,
.right {
  flex-basis: 20%;
}
.middle {
  flex-grow: 1;
  margin: 0 20px;
}
/* 图片轮播样式 */
.carousel {
  overflow: hidden;
  position: relative;
}
.carousel img {
  width: 100%;
  height: auto;
  display: block;
}
.carousel .slide {
  animation: slide 5s infinite;
}
@keyframes slide {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-100%);
  }
}
</style>